<script lang="ts" setup>
import {ref, unref} from 'vue'
import qs from 'qs'
import dayjs from 'dayjs'
// console.log(qs, 'qs')


// let url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123')
// let queryString = url.search // "?q=123"
// console.log(url, queryString, 'queryString')
// const obj = qs.parse('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123')

// console.log(obj)

let now = dayjs()
console.log(now, 'dayjs')
// 1. 使用type定义一种类型
type Methods = 'POST' | 'GET' | 'DELETE'

let methods: Methods = 'GET'

const value = ref<number>(3)

const checked = ref<boolean>(false)

console.log(unref(value), 'unref')


</script>
<template>
  <div>
    <h1>https://blog.csdn.net/qq_36380426/article/details/108633463</h1>
    <h1>十个特殊符号</h1>
    <p>!非空断言操作符</p>
    <p>?.操作符(可选链)</p>
    <p>??空值合并运算符(当左侧为null或者undefined时返回右侧值, 否则返回左侧值)</p>
    <p>?: 可选属性</p>
  </div>
  <div>
    <h1>type</h1>
    <p>类型别名用来给一个类型起个新名字。</p>
    <p>或者 字符串字面量类型用来约束取值只能是某几个字符串中的一个。</p>
    <p>所以 类型别名常用于联合类型。</p>
    <span>type Mode = 'vertical' | 'vertical-right' | 'horizontal' | 'inline'</span>  


    <h1>enum</h1>
    <p>枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。</p>
    <p>枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：</p>
    <p></p>
  </div>
  <div class="test">
    <span>html</span>
    <span>css</span>
    <span>javascript</span>
  </div>
  <!-- antd组件 -->
  <div>
    <a-input-number id="inputNumber" v-model:value="value" :min="0" :max="5" />当前值: {{value}}
  </div>
  <div>
    <a-rate v-model:value="value" />
  </div>
  <div>
    <a-slider v-model:value="value" :max="5" />
  </div>
  <div>
    <a-badge :count="value">
      <a href="#" class="head-example" />
    </a-badge>
  </div>
  <div>
    <a-switch v-model:checked="checked" />
  </div>
  <div>
    

  </div>
</template>
<style lang="scss" scoped>
.test{
  span:not(:last-child){
    margin-right: 10px;
    border-right: 1px solid #000;
  }
}

</style>